import Item from './Item'
const Main = ({ content, delItem, changeCheck }) => {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        <Item content={content} delItem={delItem} changeCheck={changeCheck} />
      </ul>
    </section>
  )
}
export default Main

// {
//   <li key={} className="completed">
// <div className="view">
//   {/* 可选框 */}
//   <input
//     onChange={changeCheck}
//     className="toggle"
//     type="checkbox"
//     checked
//   />
//   {/* 文字内容 */}
//   <label>Taste JavaScript</label>
//   {/* 删除按钮 */}
//   <button className="destroy" onClick={delItem}></button>
// </div>
// {/* 编辑 */}
// <input
//   className="edit"
//   onChange={editContent}
//   value="Create a TodoMVC template"
// />
// </li>

// <li>
// <div className="view">
//   <input className="toggle" type="checkbox" />
//   <label>Buy a unicorn</label>
//   <button className="destroy"></button>
// </div>
// <input onChange={editContent} className="edit" value="Rule the web" />
// </li>
// }
